<template>
	<view class="fix-top-window">
		<view class="uni-header">
			<uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
			<view class="uni-group">
				<button class="uni-button" type="primary" size="mini" :disabled="!selectedIndexs.length"
					@click="addDatas">批量添加</button>
				<button class="uni-button" type="warn" size="mini" :disabled="!selectedIndexs.length"
					@click="delDatas">批量丢弃</button>
				<!-- <button class="uni-button" type="primary" size="mini" :disabled="!selectedIndexs.length"
					@click="openTagsPopup">{{$t('common.button.tagManager')}}</button> -->
				<!-- #ifdef H5 -->
				<!-- <button class="uni-button" type="primary" size="mini" @click="$refs.batchSms.open()">{{$t('common.button.sendSMS')}}</button> -->
				<!-- 				<download-excel class="hide-on-phone" :fields="exportExcel.fields" :data="exportExcelData"
					:type="exportExcel.type" :name="exportExcel.filename">
					<button class="uni-button" type="primary" size="mini">{{$t('common.button.exportExcel')}}</button>
				</download-excel> -->
				<!-- #endif -->
			</view>
		</view>
		<view class="container">
			<!-- 搜索框 -->
			<!-- 			<view class="search-box">
				<input v-model="searchKeyword" placeholder="请输入搜索关键词" @input="handleSearch" />
			</view> -->
			<!-- 列表 -->
			<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, error, options}" :options="options"
				collection="reviewed" orderby="createTime desc" field="_id,account,create,createTime" :getone="false"
				:action="action" :where="where" @load="onqueryload" @error="onqueryerror">
				<view v-if="error" class="error">{{error.message}}</view>
				<view class="uni-list">
					<checkbox-group  @change="checkboxChange">
						<uni-card :title="item.account" v-for="(item, index) in data" :key="index" :isFull="true"
							:sub-title="'提交时间:'+item.createTime" :extra="'提交人:'+item.create"
							style="margin: 10px 0 !important;">
							<view slot="actions" class="card-actions">
								<view class="card-actions-item" style="margin-right: 20px;float: left;">
									<checkbox :value="item._id" :checked="false" activeBackgroundColor="#007aff" iconColor="#fff" />
								</view>
								<view @click="saveData(item._id,item.account)" style="margin-right: 20px;float: left;">
									<button class="mini-btn" type="primary" size="mini">添加</button>
								</view>
								<view @click="delData(item._id)" style="margin-right: 20px;float: left;">
									<button class="mini-btn" type="warn" size="mini">丢弃</button>
								</view>
							</view>
						</uni-card>
					</checkbox-group>
				</view>
				<view v-if="loading" class="loading">加载中...</view>
			</unicloud-db>
		</view>
	</view>
	<view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确定" title="确定框" :content="messageText"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	const db = uniCloud.database()
	// 分页配置
	const pageSize = 3
	const pageCurrent = 1
	export default {
		data() {
			return {
				options: {
					pageSize: 4, // 每页显示的记录数
					pageCurrent: 1 // 当前页码
				},
				action: '',
				where: {}, // 类型为对象或字符串
				type: 'center',
				msgType: '',
				messageText: '',
				selectedIndexs: [],
				dataId: '',
				isAdd: '',
				numberData: '',
				ids: [],
				data: [],
			};
		},
		onPullDownRefresh() { //下拉刷新
			this.loading = true;
			this.$refs.udb.loadData({
				clear: true //可选参数，是否清空数据
			}, () => {
				uni.stopPullDownRefresh()
				this.loading = false;
			})
		},
		onReachBottom() { //滚动到底翻页
			this.$refs.udb.loadMore()
		},
		methods: {
			checkboxChange: function(e) {
				this.ids = []
				this.selectedIndexs = e.detail.value;
				this.selectedIndexs.forEach(id => {
					const item = this.data.find(item => item._id === id);
					if (item) {
						this.ids.push(item.account);
					}
				});
			},
			onqueryload(data, ended) {
				// 可在此处预处理数据，然后再渲染界面
				this.data = data
			},
			onqueryerror(e) {
				// 加载数据失败
			},
			saveData(id, number) {
				console.log(id)
				this.numberData = number
				this.dialogToggle('success', id, 'add')
			},
			delData(id) {
				console.log(id)
				this.dialogToggle('success', id, 'del')
			},
			dialogToggle(type, id, aIsd) {
				this.msgType = type
				this.$refs.alertDialog.open()
				if (id && aIsd) {
					this.dataId = id
					this.isAdd = aIsd
				}
				if (aIsd == 'add') {
					this.messageText = '确定要保存到库中去吗？'
					this.msgType = 'success'
				}
				if (aIsd == 'del') {
					this.messageText = '确定删除吗？'
					this.msgType = 'error'
				}
			},
			dialogConfirm() {
				console.log('点击确认')
				uni.showLoading({
					title: '加载中'
				});
				let that = this;
				if (that.dataId) {
					if (that.isAdd == 'add') {
						that.addDataObj()
					}
					if (that.isAdd == 'del') {
						that.delDataObj()
					}
				}
			},
			delDataObj() {
				let that = this;
				// const rid = that.dataId;
				// const anum = that.numberData;
				// const index = that.selectedIndexs.indexOf(rid);
				// const index2 = that.ids.indexOf(anum);
				// if (index !== -1) {
				// 	that.selectedIndexs.splice(index, 1);
				// }
				// if (index2 !== -1) {
				// 	that.ids.splice(index2, 1);
				// }
				that.selectedIndexs = []
				that.ids = []
				db.collection("reviewed").where({
					_id: that.dataId
				}).remove().then(res => {
					uni.hideLoading();
					that.$refs.udb.loadData({
						clear: true //可选参数，是否清空数据
					}, () => {
						uni.stopPullDownRefresh()
					})
				}).catch(err => {
					uni.hideLoading();
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				})
			},
			addDataObj() {
				let that = this;
				const currentDate = new Date();
				const dateString = currentDate.toLocaleString();
				db.collection("account").add({
					'number': that.numberData
				}).then(res => {

				}).catch(err => {
					uni.hideLoading();
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				})
				that.delDataObj()
			},
			delDatas() {
				let that = this;
				uni.showLoading({
					title: '加载中'
				});

				db.collection("reviewed").where({
					_id: db.command.in(that.selectedIndexs)
				}).remove().then(res => {
					uni.hideLoading();
					that.$refs.udb.loadData({
						clear: true //可选参数，是否清空数据
					}, () => {
						uni.stopPullDownRefresh()
					})
					that.selectedIndexs = []
					that.ids = []
				}).catch(err => {
					uni.hideLoading();
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				})
			},
			addDatas() {
				let that = this;
				console.log(that.ids)
				var obj = [];
				for (var i = 0; i < that.ids.length; i++) {
					const currentDate = new Date();
					const dateString = currentDate.toLocaleString();
					var o = {
						'number': that.ids[i]
					}
					obj.push(o)
				}
				console.log(obj)
				db.collection("account").add(obj).then(res => {

				}).catch(err => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				})
				that.delDatas()
			}
		}
	};
</script>

<style>
	.container {
		padding: 10px;
	}

	.uni-card__header-content-titl {
		max-width: 200px;
	}

	.uni-ellipsis {
		/* overflow: hidden; */
		/* white-space: nowrap; */
		/* text-overflow: ellipsis; */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.loading {
		padding: 20px;
		text-align: center;
	}

	.error {
		color: #DD524D;
	}

	.fixed-top {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		/* 确保头部显示在最上层 */
		background-color: white;
		/* 可根据实际情况修改背景颜色 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 添加阴影，增强层次感 */
	}
</style>